<template>
	<view>
		<view class="top-box">
			<view class="text">当前定位</view>
			<view class="right-site"> <image src="../../static/site.png" mode=""></image> 北京</view>
		</view>
		<view class="type">
			<view v-for="item in list" :key="item.id" @click="cut(item.id)"
				:class="{'stateStyle': style == item.id}">
				<text :class="{'stateStyle1': style == item.id}"></text> {{item.name}}
			</view>
		</view>
		
		<view class="type-box">
			<view class="box-1" v-for="i in 20">青岛市</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style:1,
				list: [{
					id: 1,
					name: '北京市'
				}, {
					id: 2,
					name: '山东省'
				}, {
					id: 3,
					name: '陕西省'
				}, {
					id: 4,
					name: '河南省'
				}, {
					id: 5,
					name: '上海省'
				}, {
					id: 6,
					name: '广东省'
				}, {
					id: 7,
					name: '云南省'
				}, {
					id: 8,
					name: '江西省'
				}, {
					id: 9,
					name: '福建省'
				}, {
					id: 10,
					name: '浙江省'
				}, {
					id: 12,
					name: '江苏省'
				}],
			}
		},

		methods: {
			cut(e) {
				this.style = e
			},
		}
	}
</script>

<style lang="scss">
	.type {
		background-color: #f1f1f1;
		display: inline-block;
		width: 280rpx;
		border-right: 1rpx solid #f5f5f5;
		height: 1098rpx;
		overflow-y: auto;
	
		view {
			// display: inline-block;
			// text-align: center;
			width: 100%;
			height: 100rpx;
			color: #222;
			font-size: 28rpx;
			line-height: 100rpx;
	
			text {
				display: inline-block;
				width: 7rpx;
				height: 44rpx;
				background-color: #FFF;
				position: relative;
				top: 29rpx;
				float: left;
				left: 0rpx;
				border-radius: 5rpx;
				margin-right: 29rpx;
			}
			
			.stateStyle1 {
				background-color: #1D2DA7;
			}
		}
	
		.stateStyle {
			background-color: #FFF;
		}
	}
	
	.type-box {
		width: 450rpx;
		height: 1098rpx;
		overflow-y: auto;
		float: right;
		
		.box-1 {
			margin: 30rpx 0 72rpx 50rpx;
		}
	}
	
	.top-box {
		display: flex;
		justify-content:space-between;
		padding: 0 38rpx;
		// margin: 30rpx 0;
		height: 100rpx;
		align-items: center;
		
		.text {
			
		}
		
		.right-site {
			image {
				height: 36rpx;
				width: 36rpx;
				vertical-align: middle;
				position: relative;
				top: -5rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>